import React,{Component} from 'react';
import {Platform, StyleSheet,ScrollView,Text, View,TouchableOpacity, Alert,Image, TextInput } from 'react-native';
import DatePicker from 'react-native-datepicker';

export default class attendance extends Component{
    static navigationOptions = {
        headerStyle:{
            backgroundColor:'#d04542',
            height:50,
        },
        headerTintColor:'white',
    };
  constructor(props){
    super(props)
    this.state = {date:"2016-05-15"}
  }
	render(){
		const { navigation } = this.props;
		return(
		    <ScrollView style={styles.ScrollView}>
		        <View style={styles.container}>
		        	<Text style={styles.titles}>第一步:请选择月份</Text>
		        	<View style={styles.month}>
		        		<Text style={styles.monthTitle}>选择月份</Text>
		        		<DatePicker
			        		style={styles.monthInput}
					        date={this.state.date}
					        mode="date"
					        placeholder="select date"
					        format="YYYY-MM-DD"
					        confirmBtnText="Confirm"
					        cancelBtnText="Cancel"
					        onDateChange={(date) => {this.setState({date: date})}}
					      />
		        	</View>
		        	<View style={{padding:10,}}>
				        <TouchableOpacity style={{height:40}}
				        	onPress={()=>{ 
										navigation.navigate("confirm")
									}}
				        >
				      		<Text style={styles.btn}>下一步</Text>
				    	</TouchableOpacity>
			    	</View>
		        </View>
		        
         	</ScrollView>
		);
	}
}
const styles = StyleSheet.create({
	btn:{
	  	width:"100%",backgroundColor:'#D04542',borderRadius:2,
	  	lineHeight: 40 ,color: 'white',textAlign: 'center',
	},
	monthInput:{
		flex:3,
	},
	monthTitle:{
		flex:1,fontSize: 17,lineHeight: 35 ,
	},
	month:{
		flexDirection:'row',padding:10,
	},
	container:{
		height: 200,margin:10,
	},
	titles:{
		height: 40,borderBottomWidth:1,borderBottomColor: "#D4D4D4",
		textAlign: 'center',fontSize: 18,lineHeight: 40 ,
	},
})
